<template>
  <el-dialog v-model="visible" title="隐私政策" width="600px">
    <div class="privacy-policy-content">
      <!-- 示例内容 -->
      <p>这里是我们的隐私政策条款，请仔细阅读。</p>
      <p>我们尊重并保护用户的隐私权，不会泄露您的任何个人信息...</p>
      <p>请确认您已阅读并理解上述内容。</p>
    </div>

    <template #footer>
      <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
        <el-button type="primary" size="large" @click="handleAgree" style="width: 100%; max-width: 300px;">
          我已阅读
        </el-button>
        <!-- 可选：添加关闭按钮 -->
        <!-- <el-button @click="visible = false">关闭</el-button> -->
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue'

// 接收 v-model 控制弹窗显示状态
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

// 定义事件
const emit = defineEmits(['update:modelValue', 'agree'])

// 控制 dialog 显示状态的计算属性
const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

// 点击“我已阅读并同意”按钮时触发
function handleAgree() {
  // 通知父组件用户已同意协议
  emit('agree')
  // 同步更新 modelValue（用于勾选复选框）
  emit('update:modelValue', true)
  // 关闭弹窗
  visible.value = false
}
</script>
